<link rel="stylesheet" href="__STATIC_LIB__layuiadmin/layui/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="__STATIC_LIB__layuiadmin/layui/layui_ext/dtree/font/dtreefont.css">

<style>
    @media screen and (max-width: 500px) {
        
        .layui-layer.layui-layer-page {
            width: 100% !important;
            overflow-x: scroll !important;
            left: 0 !important;
        }

        .layui-layer-title {
            width: 100% !important;
            box-sizing: border-box;
        }

        .layui-layer-content {
            width: 100% !important;
        }
    }
</style>

<form class="layui-form seller-form"  action="" >
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">辅导员手机：</label>
            <div class="layui-input-inline">
                <input type="text" id="initstatus" name="initstatus" value = "0" autocomplete="off"
                    class="layui-input layui-hide">
                <input type="text" id="pid" name="pid" value = "1" autocomplete="off"
                    class="layui-input layui-hide">
                <input type="text" id="pname" name="pname" value = "黄河科技学院" autocomplete="off"
                    class="layui-input layui-hide">
                <input type="text" id="mobile" name="mobile" placeholder="请输入辅导员手机" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">辅导员姓名：</label>
            <div class="layui-input-inline">
                <input type="text" id="truename" name="truename" placeholder="请输入辅导员姓名" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">小助手手机：</label>
            <div class="layui-input-inline">
                <input type="text" id="assistant_mobile" name="assistant_mobile" placeholder="请输入小助手手机" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">小助手姓名：</label>
            <div class="layui-input-inline">
                <input type="text" id="assistant_truename" name="assistant_truename" placeholder="请输入小助手姓名" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="*"><i
                    class="iconfont icon-chaxun"></i>筛选</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="assistant-add"><i
                    class="layui-icon">&#xe608;</i>添加</button> 
        </div>
    </div>
</form>

<div class="table-body">
    <div class="layui-row layui-col-space10" style="margin-left: 0;">
        <div id="treeContainer" class="layui-col-md3" style="overflow: auto; margin: 15px 0;border-width: 1px; border-style: solid; border-color: #e6e6e6;">
            <tree id="deptTree" class="dtree" data-id="0"></tree>
        </div>
        <div id="tableContainer" class="layui-col-md9">
            <table id="assistantTable" lay-filter="assistantTable"></table>
        </div>
    </div>
</div> 

<script>
    layui.extend({
        dtree: '__STATIC_LIB__layuiadmin/layui/layui_ext/dtree/dtree'
    }).use(['form', 'layedit', 'layer', 'laydate', 'dtree', 'table'], function () { 
        var layer = layui.layer, table = layui.table, form = layui.form, dtree = layui.dtree;
        // 定义变量保存当前页面和当前页面数据条数
        var currPage; 
        var dataNum;

        layui.table.render({
            elem: '#assistantTable',
            height: 'full-115',
            cellMinWidth: '80',
            page: 'true',
            limit: '20',
            url: "{:url('BookAssistant/index')}?_ajax=1&pid=1",
            id: 'assistantTable',
            cols: [[
                { type: 'numbers' },
                { field: 'deptName', title: '部门名称', width: 150 },
                { field: 'positionName', title: '职位', width: 80 },
                { field: 'mobile', title: '辅导员手机', width: 120 },
                { field: 'truename', title: '辅导员姓名', width: 120 },
                { field: 'assiastant_mobile', title: '小助手手机', width: 120 },
                { field: 'assiastant_truename', title: '小助手姓名', width: 120 },
                { field: 'operating', title: '操作', width:80, align: 'center', templet:function(data){
                    var html = '';
                    html += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delAssistant">删除</a>';
                    return html;
                }}
            ]], //设置表头
            done: function(res, curr, count){
                // 给变量赋值 
                dataNum = res.data.length;
                currPage = curr;
            }
        });

        tree = dtree.render({
            elem: "#deptTree",
            initLevel: 2,
            request:{"id":1},
            url: '{:url("Dept/getList")}',
            checkbar: false,    
            cache: true,
            checkbarType: "all",
            response:{message:"msg",statusCode:0},
            dataStyle: "layuiStyle",
            done: function(res, $ul, first){
                dtree.dataInit("deptTree", $('#pid').val());  
                if($("#tableContainer").height() > 0) {
                    $("#initstatus").val('1'); 
                }
                $("#treeContainer").height($("#tableContainer").height() - 32); 
            }
        });
  
        $(window).resize(function() {
            $("#treeContainer").height($("#tableContainer").height() - 32);
        });　

        // 绑定节点点击
        dtree.on("node('deptTree')" ,function(obj){
            // 清理搜索条件
            $('#mobile').val("");
            $('#truename').val("");
            $('#assistant_mobile').val("");
            $('#assistant_truename').val("");
            $('#pid').val(obj.param.nodeId);
            $('#pname').val(obj.param.context);

            table.reload('assistantTable', {
                where: {pid: obj.param.nodeId, pname: obj.param.pname, mobile: '', truename: '', assistant_mobile: '', assistant_truename: ''}
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //搜索
        layui.form.on('submit(*)', function (data) {
            table.reload('assistantTable', {
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            
            // 如果有筛选条件则
            // 重置选中节点为根节点 
            if($('#mobile').val() != '' || 
                $('#truename').val() != ''|| 
                $('#assistant_mobile').val() != ''|| 
                $('#assistant_truename').val() != '') {
                dtree.dataInit("deptTree", '1'); 
                $('#pid').val('1');
                $('#pname').val('黄河科技学院');
            }

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //添加
        layui.form.on('submit(assistant-add)', function () { 
            JsGet("{:url('BookAssistant/assistantUser')}", function(e){
                if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                    layer.msg(e.msg); return false;
                }

                window.box = layer.open({
                    type: 1,
                    content: e,
                    area: ['750px', '470px'],
                    title: '助手列表',
                    end:function () {
                        table.reload('assistantTable');
                    }
                })
            });
            return;
        });

        //监听工具条
        table.on('tool(assistantTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'delAssistant'){ //编辑
                layer.confirm('真的要删除么',{icon: 3}, function(index){
                    JsPost("{:url('BookAssistant/assistantUserDel')}",{ assistantUserMobile: data.assiastant_mobile}, function (res) {
                        //删除逻辑中判断只有一条数据时应该刷新前一页信息
                        layer.msg(res.msg);
                        if(res.status){
                            if(dataNum == 1){
                                currPage = currPage - 1;
                            }

                            table.reload('assistantTable', {
                                page: {
                                    curr: currPage
                                }
                            });
                            return false;
                        }
                    });
                });
            }
        });
    })
</script>

